{% extends 'admin/admin_base.html' %}
{% block title %}{% if 'create' == cha[0] %}增加{% elif 'change' == cha[0] %}修改{% else %}查看{% endif %}-用户组{% endblock %}
{% block head %}
    {{ super() }}
{% endblock %}
{% block body %}
    <ul class="nav nav-tabs">
        {% if 'change' == cha[0] %}
            <li onclick="chick_1()"><a href="#" >保存</a></li>
        {% elif 'create' == cha[0] %}
            <li onclick="chick()"><a href="#" >保存</a></li>
        {% endif %}

        <li><a href="{{ url_for('workexib.index') }}">取消</a></li>
    </ul>
    <div class="admin-form form-horizontal">
    <form action="{{ url_for('workexib.change_avatar') }}" method=post enctype=multipart/form-data>
        {% if 'change' == cha[0] %}
        <div class="form-group">
            <label for="user" class="col-md-2 control-label">ID：</label>
            <div class="col-md-10" style="width: 30%">
            <input class="form-control" id="ids" name="ids" type="text" value="{{ cha[1]['id'] }}" readonly="true"></div>
        </div>
        {% endif %}

        <div class="form-group">
            <label for="type" class="col-md-2 control-label">类别：</label>
            <div class="col-md-10" style="width: 30%">
                <input class="form-control" id="type" name="type" type="text" readonly="true" value="原创">
            </div>
        </div>
        <div class="form-group">
            <label for="name" class="col-md-2 control-label">名称：</label>
            <div class="col-md-10" style="width: 30%">
            {% if 'change' == cha[0] %}
                <input class="form-control" id="name" name="name" type="text" value="{{ cha[1]['name'] }}">
            {% elif 'check' == cha[0] %}
                <input class="form-control" id="name" name="name" type="text" value="{{ cha[1]['name'] }}" readonly="true">
            {% else %}
                <input class="form-control" id="name" name="name" type="text">
            {% endif %}
            </div>
        </div>

        <div class="form-group">
            <label for="singer" class="col-md-2 control-label">歌手：</label>
            <div class="col-md-10" style="width: 30%">
            {% if 'change' == cha[0] %}
                <input class="form-control" id="singer" name="singer" type="text" value="{{ cha[1]['singer'] }}">
            {% elif 'check' == cha[0] %}
                <input class="form-control" id="singer" name="singer" type="text" value="{{ cha[1]['singer'] }}" readonly="true">
            {% else %}
                <input class="form-control" id="singer" name="singer" type="text">
            {% endif %}
            </div>
        </div>

        <div class="form-group">
            <label for="Lyrics" class="col-md-2 control-label">作词：</label>
            <div class="col-md-10" style="width: 30%">
            {% if 'change' == cha[0] %}
                <input class="form-control" id="Lyrics" name="Lyrics" type="text" value="{{ cha[1]['Lyrics'] }}">
            {% elif 'check' == cha[0] %}
                <input class="form-control" id="Lyrics" name="Lyrics" type="text" value="{{ cha[1]['Lyrics'] }}" readonly="true">
            {% else %}
                <input class="form-control" id="Lyrics" name="Lyrics" type="text">
            {% endif %}
            </div>
        </div>

        <div class="form-group">
            <label for="Composer" class="col-md-2 control-label">作曲：</label>
            <div class="col-md-8" style="width: 30%">
            {% if 'change' == cha[0] %}
                <input class="form-control" id="Composer" name="Composer" type="text" value="{{ cha[1]['Composer'] }}">
            {% elif 'check' == cha[0] %}
                <input class="form-control" id="Composer" name="Composer" type="text" value="{{ cha[1]['Composer'] }}" readonly="true">
            {% else %}
                <input class="form-control" id="Composer" name="Composer" type="text">
            {% endif %}
            </div>
        </div>

        <div class="form-group">
            <label for="Arranger" class="col-md-2 control-label">编曲：</label>
            <div class="col-md-8" style="width: 30%">
            {% if 'change' == cha[0] %}
                <input class="form-control" id="Arranger" name="Arranger" type="text" value="{{ cha[1]['Arranger'] }}">
            {% elif 'check' == cha[0] %}
                <input class="form-control" id="Arranger" name="Arranger" type="text" value="{{ cha[1]['Arranger'] }}" readonly="true">
            {% else %}
                <input class="form-control" id="Arranger" name="Arranger" type="text">
            {% endif %}
            </div>
        </div>

        <div class="form-group">
            <label for="Mix" class="col-md-2 control-label">混音：</label>
            <div class="col-md-8" style="width: 30%">
            {% if 'change' == cha[0] %}
                <input class="form-control" id="Mix" name="Mix" type="text" value="{{ cha[1]['Mix'] }}">
            {% elif 'check' == cha[0] %}
                <input class="form-control" id="Mix" name="Mix" type="text" value="{{ cha[1]['Mix'] }}" readonly="true">
            {% else %}
                <input class="form-control" id="Mix" name="Mix" type="text">
            {% endif %}
            </div>
        </div>

        <div class="form-group">
            <label for="Lyric" class="col-md-2 control-label">歌词：</label>
            <div class="col-md-8" style="width: 30%">
            {% if 'change' == cha[0] %}
                <textarea rows="3" cols="20" style="width: 130%;height: 160px;" class="form-control" id="Lyric" name="Lyric" type="text">{{ cha[1]['Lyric_ci']|safe }}</textarea>
            {% elif 'check' == cha[0] %}
                <textarea rows="3" cols="20" style="width: 130%;height: 160px;" class="form-control" id="Lyric" name="Lyric" type="text" readonly="true">{{ cha[1]['Lyric_ci']|safe }}</textarea>
            {% else %}
                <textarea rows="3" cols="20" style="width: 130%;height: 160px;" class="form-control" id="Lyric" name="Lyric" type="text"></textarea>
            {% endif %}
            </div>
        </div>

        <div class="form-group">
            <label for="address" class="col-md-2 control-label">试听地址：</label>
            <div class="col-md-8" style="width: 30%">
            {% if 'change' == cha[0] %}
                <input class="form-control" id="address" name="address" type="text" value="{{ cha[1]['Address'] }}">
            {% elif 'check' == cha[0] %}
                <input class="form-control" id="address" name="address" type="text" value="{{ cha[1]['Address'] }}" readonly="true">
            {% else %}
                <input class="form-control" id="address" name="address" type="text">
            {% endif %}
            </div>
        </div>
        {% if 'change' == cha[0] or 'check' == cha[0] %}
{#                文件的#}
            <div class="form-group">
                <label for="filename" class="col-md-2 control-label">上传图片</label>
                <div class="col-md-10" style="width: 30%">
                    <img src="{{ url_for('static',filename=cha[1]['photo']) }}" width="150" height="150" alt="..." class="img-thumbnail" id="myImg">
                    {% if 'change' == cha[0] %}
                    <input type=file name=file accept="image/jpg" onchange="changImg(event)"><br/>
                    <input type=submit value=上传文件>
                        <strong style="color: red">格式要求：.jpg格式</strong>
                        {% endif %}
                </div>
            </div>
        {% endif %}
        <label class="col-md-2 control-label"></label>
            <div class="col-md-8" style="width: 30%">
                <p id="message1" style="color: red;"></p>
            </div>
    </form>
    </div>
    <input id="photo" style="position: absolute; top: -9999px; left: -9999px;" value="{{ cha[0] }}"/>
{% endblock %}
{% block tail %}
        {{ super() }}
{#    <!--{{ lib.form_js() }}-->#}
{#    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>#}
    <script type="text/javascript">
        function chick() {
            var name = document.getElementById('name').value;
            var singer = document.getElementById('singer').value;
            var Lyrics = document.getElementById('Lyrics').value;
            var Composer = document.getElementById('Composer').value;
            var Arranger = document.getElementById('Arranger').value;
            var Mix = document.getElementById('Mix').value;
            var Lyric = document.getElementById('Lyric').value;
            var address = document.getElementById('address').value;
            var gg = document.getElementById('photo').value;
            var type = 1;
            $.ajax({
                headers: {"X-CSRFToken": '{{ csrf_token }}'},
                url: "workexib_1/",
                type: 'POST',
                tradition: true,
                dataType: 'json',
                data: {'name': name,'cha':gg,'singer':singer,'Lyrics':Lyrics,
                    'Composer':Composer,'Arranger':Arranger,'Mix':Mix,'Lyric':Lyric,
                'address':address,'type':type},
                success: function (data) {
                    if (data.state == 'success') {
                        document.getElementById("message1").innerHTML = '添加成功';
                        window.location.href = data.url
                    } else if (data.state == 'fail') {
                        $('#message1').html(data.message);
                        setTimeout(function () {
                            $('#message1').html('');
                        }, 3000)
                    }
                }
            })
        }
        function chick_1() {
            var id = document.getElementById('ids').value;
            var name = document.getElementById('name').value;
            var singer = document.getElementById('singer').value;
            var Lyrics = document.getElementById('Lyrics').value;
            var Composer = document.getElementById('Composer').value;
            var Arranger = document.getElementById('Arranger').value;
            var Mix = document.getElementById('Mix').value;
            var Lyric = document.getElementById('Lyric').value;
            var address = document.getElementById('address').value;
            var gg = document.getElementById('photo').value;
            var type = 1;
            $.ajax({
                headers: {"X-CSRFToken": '{{ csrf_token }}'},
                url: "workexib_1/",
                type: 'POST',
                tradition: true,
                dataType: 'json',
                data: {'id':id,'name': name,'cha':gg,'singer':singer,'Lyrics':Lyrics,
                    'Composer':Composer,'Arranger':Arranger,'Mix':Mix,'Lyric':Lyric,
                'address':address,'type':type},
                success: function (data) {
                    if (data.state == 'success') {
                        document.getElementById("message1").innerHTML = '修改成功';
                        window.location.href = data.url
                    } else if (data.state == 'fail') {
                        $('#message1').html(data.message);
                        setTimeout(function () {
                            $('#message1').html('');
                        }, 3000)
                    }
                }
            })
        }
        function changImg(e){
            for (var i = 0; i < e.target.files.length; i++) {
                var file = e.target.files.item(i);
                if (!(/^image\/.*$/i.test(file.type))) {
                    continue; //不是图片 就跳出这一次循环
                }
                //实例化FileReader API
                var freader = new FileReader();
                freader.readAsDataURL(file);
                freader.onload = function(e) {
                    $("#myImg").attr("src",e.target.result);
                }
            }
        }
    </script>
{% endblock %}